import { View, StyleSheet, TextInput, Button, Text } from 'react-native';

export default ({ navigation}:any) => {
  return (
    <View style={styles.container}>
      <View style={styles.icon}>
        <Text style={styles.titles}>京东商城</Text>
        <Text  style={styles.titless}>手机快速注册</Text>
      </View>
      {/* 输入框 */}
      <TextInput placeholder='请输入手机号' placeholderTextColor="black" style={styles.Input}/>
      <View style={styles.captcha}>
        <TextInput placeholder='请输入验证码' placeholderTextColor="black" style={styles.Inputt}/>
        <View style={styles.captchaa}><Text style={styles.text}>获取验证码</Text></View>
      </View>

      {/* 短信登录 */}
      <View style={styles.button}><Button title='立即注册'color='#FE1121' /></View>

      {/* 切换登录方式 */}
      <View style={styles.asd}>
        <View><Text style={styles.text} onPress={()=>navigation.navigate('LoginPasswordScreen')}>密码登录</Text></View>
        <View><Text style={styles.text} onPress={()=>navigation.navigate('LoginScreen')}>短信登录</Text></View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display:'flex',
    alignItems:'center',
    backgroundColor:'#FFFFFF',
  },
  icon: {
    marginTop:50,
    width:'95%',
    height:'32%',
    display:'flex',
    justifyContent:'space-between',
    alignItems:'center',
    alignContent:'center',
  },
  titles:{
    marginTop:30,
    fontSize:60,
  },
  titless:{
    marginBottom:60,
    fontSize:35,
  },
  Input:{
    width:'95%',
    height:50,
    color:'black',
    borderBottomWidth:1,
    borderBottomColor:'#E3E3E3',
  },
  Inputt:{
    flex:1,
    height:50,
    color:'black',
    borderBottomWidth:1,
    borderBottomColor:'#E3E3E3',
  },
  captcha: {
    width:'95%',
    display:'flex',
    flexDirection:'row',
  },
  captchaa: {
    display:'flex',
    justifyContent:'flex-end',
    paddingBottom:10,
  },
  button: {
    width:'95%',
    marginTop:20,
    marginBottom:20,
  },
  asd: {
    width:'95%',
    display:'flex',
    flexDirection:'row',
    justifyContent:'space-between',
  },
  text: {
    width:'100%',
    color:'#7F8281',
  }
});
